<template>
  <!-- 
        $attrs 记录了组件标签上所有被绑定的且未被 props 拦截的属性
               通过 v-bind 多属性同时绑定规则，将该自定义组件标签上绑定的属性转换绑定在 el-dialog 上
               这样可以实现 在该自定义组件标签上绑定的属性等同于直接绑定在 el-dialog 上

        $listeners 记录了组件标签上所有被绑定的事件
                通过 v-on 多事件同时绑定规则，将该自定义组件标签上绑定的事件转换绑定在 el-dialog 上
                这样可以实现 在该自定义组件标签上绑定的事件等同于直接绑定在 el-dialog 上
                同时当前组件也具有相同的自定义事件方法
    -->
  <el-dialog
    title="添加新产品分类"
    v-bind="$attrs"
    v-on="$listeners"
    @open="resetNewCate"
  >
    <el-form label-width="80px" size="normal">
      <el-form-item label="分类名称">
        <el-input placeholder="分类名称" v-model="newCate.cat_name"></el-input>
      </el-form-item>
      <el-form-item label="父级分类">
        <el-cascader
          clearable
          :options="parentCate"
          :props="{ label: 'cat_name', value: 'cat_id', checkStrictly: true }"
          v-model="newCateAttr"
          @change="setNewCateAttr"
        ></el-cascader>
      </el-form-item>
    </el-form>

    <template #footer>
      <span>
        <el-button @click=" $emit('update:visible', false) ">取 消</el-button>
        <el-button type="primary" @click="addNewCate()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script>
export default {
  data() {
    return {
      parentCate: [],
      newCateAttr: [],
      newCate: {
        cat_name: "",
        cat_pid: 0,
        cat_level: 0,
      },
    };
  },
  methods: {
    async loadTypeLevelTwo() {
      try {
        let result = await this.$api.getCategories({
          type: 2,
        });
        if (result == "error") return;
        this.parentCate = result;
      } catch (error) {
        console.log("CategoriesView-loadTypeListPage-error:", error);
      }
    },
    resetNewCate() {
      this.loadTypeLevelTwo();
      this.newCate = {
        cat_name: "",
        cat_pid: 0,
        cat_level: 0,
      };
      this.newCateAttr = [];
    },
    setNewCateAttr() {
      console.log(this.newCateAttr);
      let leg = this.newCateAttr.length;
      if (leg == 0) {
        this.newCate.cat_level = 0;
        this.newCate.cat_pid = 0;
      } else {
        this.newCate.cat_level = leg;
        this.newCate.cat_pid = this.newCateAttr[leg - 1];
      }
      console.log(this.newCate);
    },
    async addNewCate() {
      // ajax
      console.log("参数:",this.newCate)
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="less" scoped>
.el-cascader {
  width: 100%;
}
</style>